<template>
  <div class="layout-column">
    <div class="p-2 shadow">
      <ui-checkbox v-model="logKeys">{{
        t("settings.debug_hotkeys")
      }}</ui-checkbox>
    </div>
    <pre class="p-2 overflow-y-scroll flex-1">{{ logs }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import UiCheckbox from "@/web/ui/UiCheckbox.vue";
import { configProp, configModelValue } from "./utils";
import { Host } from "@/web/background/IPC";

export default defineComponent({
  name: "settings.debug",
  components: { UiCheckbox },
  props: configProp(),
  setup(props) {
    const { t } = useI18n();

    return {
      t,
      logs: Host.logs,
      logKeys: configModelValue(() => props.config, "logKeys"),
    };
  },
});
</script>
